<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>班级相册-云校通</title>
<style type="text/css">
	@media screen and (max-width:320px){
		  .thumbnail {
		  		width: 75px !important;
		  		height: 75px !important;
		  }
		}
	@media screen and (max-width:360px){
		  .thumbnail {
		  		width: 85px !important;
		  		height: 85px !important;
		  }
		}
</style>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<body ontouchstart style="background: #FFFFFF;">
    <div class="xc_hd">
   		<img class="img-max" src="<%=basePath %>/images/xc_tbg.jpg">
   		<c:if test="${user.roleType == 1 }">
   			<a href="<%=basePath %>/ls/album/class/publish"><span><img class="img-max" src="<%=basePath %>/images/tjxc.png"></span></a>
   			<a class="weui_btn weui_btn_mini bg-orange-b f12 wd_xc" id="xs_div" href="javascript:">选班</a>
   		</c:if>
    </div>
    <!-- 开始 朋友圈 -->
    <div class="weui_cells_title">
    	班级相册
    </div>
    <div class="weui_panel weui_panel_access" style="margin-bottom: 55px;">
	    <div class="weui_panel_bd moments" id="classAlbumList">
	        
	    </div>
    </div>
		<!-- 普通的post -->
		<script id="classAlbum-table-template" type="text/x-handlebars-template">
	       {{#each rows}} 
		   <div class="weui_cell moments__post">
	          <div class="weui_cell_hd">
	            <img class="circle" src="${config.imgUrl}{{headImgUrl}}">
	          </div>
	          <div class="weui_cell_bd" style="width:100%;">
	            <!-- 人名链接 -->
	            <a class="title" href="javascript:;">
	              <span>{{teacherName}}</span>
				  {{#classAlbumEdit teacherId id}}{{/classAlbumEdit}}
	            </a>
	            <!-- post内容 -->
	            <p class="paragraph">{{content}}</p>
	            <!-- 伸张链接 -->
	            <a class="paragraphExtender">全文</a>
	            <!-- 相册 -->
	            <div class="thumbnails weui-updown img-click">
				  {{#attachFormat attachList}}{{/attachFormat}}
	            </div>
	            <!-- 资料条 -->
	            <div class="toolbar mt15">
	              <p class="timestamp"><span class="f-blue">{{gradeText}}（{{clazz}}）班</span> {{dateFormat createTime}}</p>
	              <div>
	                <div class="actionMenu slideIn" style="z-index: 100;">
	                  <p class="actionBtn btnLike" id-data="{{id}}"><i class="icon icon-96"></i><span> 赞</span></p>
	                  <!--<p class="actionBtn btnComment" id-data="{{id}}"><i class="icon icon-80"></i> 评论</p>-->
	                </div>
	              </div>
	              <span class="actionToggle">..</span>
	            </div>
	            <!-- 赞／评论区 -->
				{{#likeList commentList}}{{/likeList}}
				<!--
				<div class="commenttext">
					<p><span class="f-blue">XX</span>: XX</p>
				</div>
				-->
	          </div>
	        </div>
			{{/each}}
	    </script>
	    <!-- 结束 post -->
	</div>
	<!-- 班级列表 start -->
	<div id="xs_div_box" class="weui_tab tab-bottom" style="display:none; z-index:600; background-color: #f8f8f8;">
		<div class="weui_tab_bd">
	        <div class="weui-header bg-blue"> 
	        	<div class="weui-header-left" id="studentBack"> <a class="icon icon-109 f-white">取消</a>  </div>
				<h1 class="weui-header-title">${config.appName}班级列表</h1>
			</div>
	        <!--下拉选择-->
	        <div class="page-bd" id="classList">  
	          
	    	</div>
	    </div>
	</div>
	<!-- 班级列表 end -->
	<script id="class-table-template1" type="text/x-handlebars-template">
	    <div class="xzbj-list">
			<ul>
			{{#each list}}
	    		<a href="<%=basePath%>/ls/album/class?grade={{grade}}&clazz={{clazz}}"><li><span>{{gradeText}}（{{clazz}}）班</span></li></a>
	     	{{/each}}
			</ul>
		</div>
	</script>
	<script id="class-table-template" type="text/x-handlebars-template">
		<ul>
			{{#each list}}
			<li class="list1">
                <div class="weui-flex js-category">
                	<span class="list_c1 mui-radio">
					</span>
                   	<p class="weui-flex-item"> {{gradeText}}</p>
                    <i class="icon icon-74"></i> 下级
                </div>
                <div class="page-category js-categoryInner">
					{{#each subList}}
					<a href="<%=basePath%>/ls/album/class?grade={{grade}}&clazz={{clazz}}">
                    	<div class="weui_cells" style="margin: 0;">
                    		<div class="weui_cell">
								<div class="weui_cell_bd weui_cell_primary">
									<p>{{gradeText}}（{{clazz}}）班</p>
								</div>
							</div>
						</div>
					</a>
					{{/each}}
                </div>
            </li>
			{{/each}}	
		</ul>    	
   	</script>
	<!--弹窗-->				
	<div class="weui_mask ueureiu weui_mask_visible" style="display: none;z-index:500;">
	</div>
	<!--End弹窗-->
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
<script>
	var classDate = {};
	$(function(){
		//页数 
	    var page = 0;
	    // 每页展示10个
	    var size =10;
	    $('.weui_panel').dropload({
	        scrollArea : window,
	        autoLoad : true,//自动加载
	  		domDown : {//上拉
	            domClass   : 'dropload-down',
	            domRefresh : '<div class="dropload-refresh f15 "><i class="icon icon-20"></i>上拉加载更多</div>',
	            domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>',
	            domNoData  : '<div class="dropload-noData">没有更多数据了</div>'
	        },
	        domUp : {//下拉
	            domClass   : 'dropload-up',
	            domRefresh : '<div class="dropload-refresh"><i class="icon icon-114"></i>上拉加载更多</div>',
	            domUpdate  : '<div class="dropload-load f15"><i class="icon icon-20"></i>释放更新...</div>',
	            domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>'
	        },
	        loadDownFn : function(me){//加载更多
		        page++;
				window.params = {
					page: page,
		  	 		rows: size,
		  	 		grade: "${grade}",
		  	 		clazz: "${clazz}"
				};	            
		       	$.ajax({
		          	url : basePath + "/album/page/query",
		  	 		type : "post",
		  	 		dataType : "json",
		  	 		data : window.params,
		            success: function(data){
		         		 if(data.rows.length == 0 || window.params.page*window.params.rows >= data.total) {// 如果没有数据
		                      // 锁定
		                      me.lock();
		                      // 无数据
		                      me.noData();
		                  }
		                  // 为了测试，延迟1秒加载
		                  setTimeout(function(){
		                  	loadClassAlbumHtml(data);
		                  	init();
		                    var lazyloadImg = new LazyloadImg({
					            el: '.weui-updown [data-img]', //匹配元素
					            top: 50, //元素在顶部伸出长度触发加载机制
					            right: 50, //元素在右边伸出长度触发加载机制
					            bottom: 50, //元素在底部伸出长度触发加载机制
					            left: 50, //元素在左边伸出长度触发加载机制
					            qriginal: false, // true，自动将图片剪切成默认图片的宽高；false显示图片真实宽高
					            load: function(el) {
					                el.style.cssText += '-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;';
					            },
					            error: function(el) {
					
					            }
					        });
		                    // 每次数据加载完，必须重置
		                     me.resetload();
		                  },200);
		              },
		              error: function(xhr, type){
		              }
		          });
	        }
	    });
	    loadClass();
	    $('.js-category').on("click", function(){
			$parent = $(this).closest('li');
		    if($parent.hasClass('js-show')){
                $parent.removeClass('js-show');
                $parent.find('i').removeClass('icon-35').addClass('icon-74');
            }else{
                $parent.siblings().removeClass('js-show');
                $parent.addClass('js-show');
                $parent.siblings().find('i').removeClass('icon-35').addClass('icon-74');
                $parent.find('i').removeClass('icon-74').addClass('icon-35');
            }
	    });
		//学生组织架构弹出
      	$("#xs_div").click(function() {
      		$('.ueureiu').show();
      		$("#xs_div_box").show();
      		//上下级拉动
			
			$(".list_c2 input").click(function() {
				var list = $("#studentList").find(".list1 input:checked");
				list.each(function(i, v){
					v.checked = false;
				});
				$(this)[0].checked = true;
				var text = $(this).closest(".weui_cell").find(".weui_cell_primary p").html();
				$("#studentText").html(text);
				$(".weui_cell_ft").html(text);
			});
      	});
      	$("#studentBack").click(function() {
			$('.ueureiu').hide();
			$("#xs_div_box").hide();
		});
	});
	function loadClass() {
		$.ajax({
	 		url : basePath + "/teacherClass",
	 		type : "post",
	 		dataType : "json",
	 		async : false,
	 		success : function(data) {
	 			if(data != null && data.length > 0) {
	 				classDate.list = data;
	 				loadStudentHtml(classDate);
	 			}
	 		}, error:function(){
	 			alert("查询异常");
   			}
	 	});
	}
	function loadStudentHtml(classDate) {
		var myTemplate;
		if(classDate.list[0].subList) {
			myTemplate = Handlebars.compile($("#class-table-template").html());
		}else {
			myTemplate = Handlebars.compile($("#class-table-template1").html());
		}
		Handlebars.registerHelper("equal", function(v1,v2,options) {
    		if(v1 == v2) {
    			//满足添加继续执行
    			return options.fn(this);
    		}else {
    			//不满足条件执行{{else}}部分
    			return options.inverse(this);
    		}
    	});
		$('#classList').html(myTemplate(classDate));
	}
	function loadClassAlbumHtml(data) {
		var myTemplate = Handlebars.compile($("#classAlbum-table-template").html());
		Handlebars.registerHelper("equal", function(v1,v2,options) {
			if(v1 == v2) {
				//满足添加继续执行
				return options.fn(this);
			}else {
				//不满足条件执行{{else}}部分
				return options.inverse(this);
			}
		});
		Handlebars.registerHelper("dateFormat", function(v1) {
			return getTime(v1, "yyyy/MM/dd hh:mm");
		});
		Handlebars.registerHelper("attachFormat", function(attachList, options) {
			var html = '';
			var len = attachList.length;
			for(var i in attachList) {
				var itm = attachList[i];
				if(i > 8) {
					html += '<div class="thumbnail hide">\
				          <img class="weui_media_appmsg_thumb lazyload" onclick="imgClick(this)" src="${config.imgUrl}'+itm.attachmentUrl+'" data-img="${config.imgUrl}'+itm.attachmentUrl+'">\
			        </div>';
				}else if((i == 8) && len > (parseInt(i)+1)) {
					html += '<div class="thumbnail" style="position: relative;">\
										<div style="opacity: 0.5;height: 100%;">\
								    <img class="weui_media_appmsg_thumb lazyload" onclick="imgClick(this)" src="${config.imgUrl}'+itm.attachmentUrl+'" data-img="${config.imgUrl}'+itm.attachmentUrl+'">\
								</div>\
								<p onclick="imgClick_ablum(this)" style="position: absolute;top: 20%;left: 10%;font-size: 40px;color: #fff;font-weight: 600;width:85%;height:80%;">+'+len+'</p>\
							</div>';
				}else {
					html += '<div class="thumbnail">\
				          <img class="weui_media_appmsg_thumb lazyload" onclick="imgClick(this)" src="${config.imgUrl}'+itm.attachmentUrl+'" data-img="${config.imgUrl}'+itm.attachmentUrl+'">\
			        </div>';
				}
			}
			return html;
		});
		  
		Handlebars.registerHelper("likeList", function(commentList, options) {
			if(commentList.length > 0) {
				var html = '<p class="liketext f-blue"><i class="icon icon-96"></i> ';
				for(var i in commentList) {
					html += '<span class="nickname" id="'+commentList[i].openid+'">'+ (i == 0 ? "" : ",") + commentList[i].name +'</span>';
				}
				html += "</p>";
				return html;
			}
			return "";
		});
		
		Handlebars.registerHelper("classAlbumEdit", function(v1, vid, options) {
			var v2 = emptyToNull("${user.teacher.id}");
			if(v2 != null && v1 == v2) {
				return '<span class="class_album_edit f-red" onclick="classAlbumEdit('+vid+')"><i class="icon icon-67"></i>编辑</span>';
			}
			return "";
		});
		$('.weui_panel_bd').append(myTemplate(data));
	}
	function classAlbumEdit(classAlbumId) {
		window.location.href = basePath + "/ls/album/class/edit/" + classAlbumId;
	}
	function init() {
		$("#classAlbumList .moments__post").each(function(i, v) {
			//定义文本
			const paragraph = $($(this).find('.paragraph'));
			const paragraphText = paragraph.text();
			const paragraphLength = paragraph.text().length;
			//定义文章长度
			const maxParagraphLength = 80;
			//定义全文按钮
			const paragraphExtender = $($(this).find('.paragraphExtender'));
			var toggleFullParagraph = false;
			
			//定义全文按钮
			if (paragraphLength < maxParagraphLength) {
			  paragraphExtender.hide();
			} else {
			  paragraph.html(paragraphText.substring(0, maxParagraphLength) + '...');
			  paragraphExtender.click(function(){
			    if (toggleFullParagraph) {
			      toggleFullParagraph = false;
			      paragraphExtender.html('全文');
			      paragraph.html(paragraphText.substring(0, maxParagraphLength) + '...');
			    } else {
			      toggleFullParagraph = true;
			      paragraphExtender.html('收起');
			      paragraph.html(paragraphText);
			    }
			  });
			};
		});
		//组织架构选择层关闭
      	$(".ueureiu").click(function() {
      		$('.ueureiu').hide();
      		$(".toolbar .active").toggleClass('active');
      	})
		$(".actionToggle").click(function() {
			$(".ueureiu").show();
			$(".ueureiu").attr("style", "opacity: 0;");
			$($(this).closest(".toolbar").find(".actionMenu")).toggleClass('active');
		});
		$(".moments__post").each(function(i, v) {
			var obj = $(v);
			obj.find(".nickname").each(function(i, v) {
				if(v.id == '${user.openid}') {
					obj.find(".btnLike span").html(" 取消");
					obj.find(".btnLike").addClass("cancel");
				}
			})
		});
		$(".btnLike").click(function() {
			var obj = $(this);
			var albumId = parseInt($(this).attr("id-data"));
			if(obj[0].classList.contains("cancel")) {
				var dataParams = {
					albumId: albumId
				}
				albumCommentCancel(obj,dataParams);
			}else {
				var dataParams = {
					type: 'zan',
			 		albumId: albumId
				}
				albumComment(obj, dataParams);
			}
		})
		
	}
	function albumCommentCancel(obj,dataParams) {
		$.ajax({
	 		url : basePath + "/album/comment/cancel",
	 		type : "post",
	 		dataType : "json",
	 		data : dataParams,
	 		success : function(data) {
	 			var toobar = obj.closest(".toolbar");
	 			$(".ueureiu").hide();
	 			$(toobar.find(".actionMenu")).toggleClass('active');
	 			if(data.code == '000') {
	 				var liketext = toobar.closest(".moments__post").find(".liketext span");
	 				if(liketext.length > 1) {
	 					liketext.each(function(i, v) {
	 						if(v.id == '${user.openid}') {
	 							$(v).remove();
	 						}
	 					});
	 				}else {
	 					obj.closest(".moments__post").find(".liketext").remove();
	 				}
	 				obj.find(".btnLike span").html(" 赞");
	 				toobar.find(".btnLike").removeClass("cancel");
	 			}
	 		}, error:function(){
	 			alert("点赞异常");
   			}
	 	});
	}
	function albumComment(obj, dataParams) {
		$.ajax({
	 		url : basePath + "/album/comment",
	 		type : "post",
	 		dataType : "json",
	 		data : dataParams,
	 		success : function(data) {
	 			var toobar = obj.closest(".toolbar");
	 			$(".ueureiu").hide();
	 			$(toobar.find(".actionMenu")).toggleClass('active');
	 			if(data.code == '000') {
	 				var liketext = toobar.closest(".moments__post").find(".liketext");
	 				if(liketext.length == 0) {
	 					var html = '<p class="liketext f-blue"><i class="icon icon-96"></i> ';
	 					html += '<span class="nickname" id="'+data.data.openid+'">'+data.data.name+'</span>';
	 					html += "</p>";
	 					toobar.after(html);
	 				}else {
	 					$(liketext).append('<span class="nickname" id="'+data.data.openid+'">,'+data.data.name+'</span>');
	 				}
	 				obj.find(".btnLike span").html(" 取消");
	 				toobar.find(".btnLike").addClass("cancel");
	 			}
	 		}, error:function(){
	 			alert("点赞异常");
   			}
	 	});
	}
	function imgClick_ablum(thiz) {
		var obj = $($(thiz).closest(".img-click")).find("img");
		var src = get_img(obj);
		var currSrc = $(thiz.closest(".thumbnail")).find("img").attr("src");
		img_preview(currSrc, src);
	}
</script>  

</body>
</html>